<template>
  <div style="overflow: hidden;">
    <el-row :gutter="20">
      <el-col :span="12" :offset="6">
        <div class="grid-content bg-purple" style="margin-top: 100px;">
          <el-card style="width: 400px; margin: auto; text-align: center;">
                      <h3>用户登录</h3>
                      <el-divider></el-divider>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
              <el-form-item label="用户:" prop="username">
                <el-input  v-model="ruleForm.username" class="inp" placeholder="请输入用户名"  prefix-icon="el-icon-user"></el-input>
              </el-form-item>
              <el-form-item label="密码:" prop="password">
                <el-input type="password" class="inp" placeholder="请输入密码"  show-password v-model="ruleForm.password"  prefix-icon="el-icon-lock"></el-input>
              </el-form-item>
              <el-form-item>				  
                <el-button style="width: 150px;" type="primary" @click="submitForm('ruleForm')">登录</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
                <el-button class="btn-r" type="text" @click="toregister()" >立即注册</el-button>
				<router-link to="/"><el-button class="btn-r" type="text">返 回</el-button></router-link>
              </el-form-item>
            </el-form>
          </el-card>
        </div>
      </el-col>
    </el-row>

  </div>
</template>
<script>
export default {
  name: "login",
  data() {
    return {
      ruleForm: {
        username: '',
        password: ''
      },
      rules: {
        username: [
			{ required: true, message: '请输入用户名', trigger: 'blur' },
			{ min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
		  ],
		  password: [
			{ required: true, message: '请输入密码', trigger: 'change' }
		  ]
      }
    };
  },
  methods: {
    submitForm(formName) {  
		this.$refs[formName].validate((valid) => {
		  if (valid) {
			const _this = this
			this.$axios.post('/login', this.ruleForm).then(res => {
			  console.log(res.data)
			  const jwt = res.headers['authorization']
			  const userInfo = res.data.data
			  // 把数据共享出去
			  _this.$store.commit("SET_TOKEN", jwt)
			  _this.$store.commit("SET_USERINFO", userInfo)
			  // 获取
			  console.log(_this.$store.getters.getUser)
			  this.$message({
			    message: '登录成功',
			    type: 'success'
			  })
			  _this.$router.push("/news")
			})
		  } else {
			console.log('error submit!!');
			return false;
		  }
		});
    },
	
    //重置表单内容
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
	
    toregister(){
      this.$router.push('/register')
    },
	// back(){
	// 	this.$router.push('/news')
	// }


  }
}
</script>

<style>
.inp{
  width: 250px;
}
.btn-r{
	float: right;
	margin-top: 10px;
	margin-right: 25px;
}
</style>
